<template>
  <div @click="toggleClick">
    <el-icon :size="20" class="icon">
      <Fold v-if="props.isActive" />
      <Expand v-else />
    </el-icon>
  </div>
</template>

<script setup>
import { Expand, Fold } from '@element-plus/icons-vue'

// 定义 props
const props = defineProps({
  isActive: {
    type: Boolean,
    default: false
  }
})

// 定义 emits
const emit = defineEmits(['toggleClick'])

// 定义 toggleClick 方法
const toggleClick = () => {
  emit('toggleClick')
}
</script>

<style scoped>
.icon {
  vertical-align: middle;
  color: var(--v3-hamburger-text-color);
}
</style>
